<template>
	<view
		class="flex align-center justify-between bg-white"
		:style="{
			width: cellInputWidth,
			backgroundColor: cellInputBg,
		}"
	>
		<view class="flex flex-1 align-center font-14 mar-x-15">
			<view
				class="flex align-center"
				:style="{
					width: labelWidth,
					height: cellInputHeight,
					fontSize: labelSize + 'px',
					borderRight: theme === 'table' ? tableBorder : 'none',
				}"
			>
				<text v-if="isTitleIcon" :class="'mar-r-5 iconfont ' + titleIcon" @click.native.stop="handleClickLeftIcon()"></text>
				<text>{{ label }}</text>
				<text v-if="isRequire" class="mar-l-5 color-ff0000">*</text>
			</view>
			
			<view
				class="flex flex-1"
				:style="{
					paddingLeft: theme === 'table' ? '10px' : 'none',
				}"
			>
				<u--input
					v-if="!isInputIcon"
					v-model="inputValue"
					:border="inputBorder"
					:disabled="isDisabled"
					:readonly="isReadonly"
				    :placeholder="placeholder"
					:fontSize="size"
					:placeholderStyle="getPlaceholderStyle()"
					:customStyle="getCustomStyle(1)"
					@input="handleInput"
					@focus="handleFocus"
				/>
				
				<view v-else class="flex flex-1 align-center"
					:style="{
						border: '1px #dadbde solid',
						borderRadius: '3px',
					}"
				>
					<view class="flex-1">
						<u--input
							v-model="inputValue"
							:border="inputBorder"
							:disabled="isDisabled"
							:readonly="isReadonly"
						    :placeholder="placeholder"
							:fontSize="size"
							:placeholderStyle="getPlaceholderStyle()"
							:customStyle="getCustomStyle(2)"
							@input="handleInput"
							@focus="handleFocus"
						/>
					</view>
					
					<view class="w-px-20 h-px-20" style="margin-top: 1px;" @click.native.stop="handleClickInputIcon()">
						<text :class="'iconfont ' + inputIcon" :style="{ color: inputIconColor }"></text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mar-r-15 w-px-20 h-px-20" @click.native.stop="handleDefault">
			<text v-if="rightIcon" :class="'iconfont ' + rightIcon" :style="{ color: rightIconColor }" @click.native.stop="handleRightIconClick()"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 组件主题，默认 input 输入框
			// input：input 输入框，table 表格形式
			theme: {
				type: String,
				default: 'input'
			},
			
			// 表格线条设置，只有 theme 为 table 才有效
			tableBorder: {
				type: String,
				default: '1px #eeeeee solid'
			},
			
			// 组件宽度
			cellInputWidth: {
				type: String,
				default: '100%'
			},
			
			// 组件高度
			cellInputHeight: {
				type: String,
				default: '50px'
			},
			
			// 组件背景色
			cellInputBg: {
				type: String,
				default: '#ffffff'
			},
			
			// 左侧标题旁是否显示图标
			isTitleIcon: {
				type: Boolean,
				default: false
			},
			
			// 左侧标题旁的图标名称
			titleIcon: {
				type: String,
				default: ''
			},
			
			// 标签名称
			label: {
				type: String,
				default: ''
			},
			
			// 标签宽度
			labelWidth: {
				type: String,
				default: 'auto'
			},
			
			// 标签字体大小
			labelSize: {
				type: Number,
				default: 14
			},
			
			// 是否必填
			isRequire: {
				type: Boolean,
				default: false,
			},
			
			// 右侧图标
			rightIcon: {
				type: String,
				default: ''
			},
			
			// 右侧图标颜色
			rightIconColor: {
				type: String,
				default: '#333333'
			},
			
			// placeholder 提示
			placeholder: {
				type: String,
				default: '请输入'
			},
			
			// 是否显示表单内图标
			isInputIcon: {
				type: Boolean,
				default: false
			},
			
			// 表单内图标名称
			inputIcon: {
				type: String,
				default: ''
			},
			
			// 表单内图标颜色
			inputIconColor: {
				type: String,
				default: '#333'
			},
			
			// 表单高度
			inputHeight: {
				type: String,
				default: '30px'
			},
			
			// 是否禁用表单
			isDisabled: {
				type: Boolean,
				default: false
			},
			
			// 表单边框
			inputBorder: {
				type: String,
				default: 'surround'
			},
			
			// 表单内部背景色
			inputBg: {
				type: String,
				default: '#ffffff'
			},
			
			// 表单圆角
			inputRadius: {
				type: String,
				default: '3px'
			},
			
			// 是否只读
			isReadonly: {
				type: Boolean,
				default: false
			},
			
			// 输入内容的字体大小
			size: {
				type: Number,
				default: 14
			},
			
			// 绑定的值
			value: {
				type: String,
				default: ''
			}
		},
		
		watch: {
			value (newVal, oldVal) {
				this.inputValue = newVal
			}
		},
		
		computed: {
			// 获取表单样式
			getCustomStyle () {
				return (type) => {
					let style = {
						// width: '100%',
						height: this.inputHeight,
						backgroundColor: this.inputBg,
						borderRadius: this.inputRadius,
					}
					
					if (type === 2) {
						style.border = 'none'
					}
					
					return style
				}
			},
			
			// input 表单 placeholder 属性样式
			getPlaceholderStyle() {
				return () => {
					let style = `font-size: 12px;`
					
					return style
				}
			}
		},
		
		data() {
			return {
				// 绑定的值
				inputValue: '',
			}
		},
		
		mounted() {
			// 初始化组件，回显数据
			this.inputValue = this.value
		},
		
		methods: {
			// 表单输入时的回调
			handleInput(val) {
				this.$emit('input', val)
			},
			
			// 表单获取焦点时的回调
			handleFocus() {
				this.$emit('focus', this.inputValue)
			},
			
			// 点击左侧图标的回调
			handleClickLeftIcon() {
				this.$emit('handleClickLeftIcon')
			},
			
			// 右侧图标点击的回调
			handleRightIconClick() {
				this.$emit('handleRightIconClick')
			},
			
			// 点击表单内图标的回调
			handleClickInputIcon() {
				this.$emit('handleClickInputIcon')
			},
			
			// 阻止默认冒泡
			handleDefault(e) {
				e.preventDefault()
			}
		}
	}
</script>

<style>
</style>